{extend name="main/index" /}
{block name="main"}
<script type="text/javascript" src="/static/admin/js/highcharts.js"></script>
{volist name="data" id="data"}
    <input type="hidden" class="id" value="{$data.id}">
    <input type="hidden" class="title" value="{$data.title}">
    <input type="hidden" class="browse" value="{$data.browse_num}">
    <input type="hidden" class="praise" value="{$data.praise_num}">
{/volist}
<div style="margin: 0 2em">
    <div id="container1" style="min-width: 400px; height: 500px; margin: 0 auto"></div><br />
    <div id="container2" style="min-width: 400px; height: 500px; margin: 0 auto"></div><br />
</div>
<script type="text/javascript">
    statistics();
    function statistics(){
        var id = [];
        var titles = [];
        var browse = []; 
        var praise = []; 
        $('.id').each(function(){
            id.push(parseInt($(this).val()));
        });
        $('.title').each(function(){
            titles.push($(this).val());
        });
        $('.browse').each(function(){
            browse.push(parseInt($(this).val()));
        });
        $('.praise').each(function(){
            praise.push(parseInt($(this).val()));
        });
        console.log(titles);
        var chart;
        $(document).ready(function () {
            //曲线图初始化
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container1',
                    type: 'line',
                    marginRight: 220,
                    marginBottom: 150
                },
                title: {
                    text: '数据曲线图表',
                    x: -20 //center
                },
                subtitle: {
                    text: '最新文章折线统计图',
                    x: -20
                },
                xAxis: {
                    categories: titles
                },
                yAxis: {
                    title: {
                        text: '数据'
                    },
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/><br/>' +
                            this.x + ': ' + this.y + '单位';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -20,
                    y: 200,
                    borderWidth: 0
                },
                series: [{
                    name: '浏览次数',
                    data: browse
                }, {
                    name: '点赞个数',
                    data: praise
                }]
            });

            //柱形图初始化
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container2',
                    type: 'column'
                },
                title: {
                    text: '数据柱形图表'
                },
                subtitle: {
                    text: '最新文章柱形统计图'
                },
                xAxis: {
                    categories: titles
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '数据'
                    }
                },
                legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 100,
                    y: 70,
                    floating: true,
                    shadow: true
                },
                tooltip: {
                    formatter: function () {
                        return '' +
                            this.x + ': ' + this.y + ' 单位';
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '浏览次数',
                    data: browse

                }, {
                    name: '点赞个数',
                    data: praise

                }]
            });

        });
    }

</script>


{/block}